<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />
		
		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />
		
		<!-- 本页面css -->
		<link rel="stylesheet" href="css/index.css" />



	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="orderList-wrapper table-wrapper section" v-cloak>
			<div class="orderList-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span @click="handleClickGotoHomePage" class="nav-item">总览</span>
					<span class="nav-item noClick">域名</span>
					<span class="nav-item">域名管理</span>
				</div>
				<div class="form-wrapper">
					<span class="from-title">
					域名列表</span>
					<div class="button-wrapper  fboxRow">
						<div class="button-wrapper-left fboxRow">
							<div @click="handleClickdomainNameRegister" class="yzButton newServer active">域名注册</div>
						</div>
						<el-input
							@keyup.enter.native="getOrderRecordBykeyword"
							class="button-wrapper-right"
							style="width: 290px"
						    placeholder="请输入搜索内容"
						    suffix-icon="el-icon-search"
						    v-model="searchkeywords">
						  </el-input>
						
					</div>

					<el-table empty-text ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
						<el-table-column label="域名" width="auto">
							<template slot-scope="scope">
								{{scope.row.name}}
							</template>
						</el-table-column>
						
						<el-table-column width="auto" label="状态(全部)">
							<template slot-scope="scope">
								<div v-html="handlestatus(scope.row)"></div>
							</template>
						</el-table-column>
						
						
						<el-table-column label="注册时间" width="auto">
							<template slot-scope="scope">
								{{scope.row.registerTime}}
							</template>
						</el-table-column>

						<el-table-column width="auto" label="到期时间">
							<template slot-scope="scope">
								{{scope.row.expireTime}}
							</template>
						</el-table-column>
						
						<el-table-column label="操作">
							<template slot-scope="scope">
								<span style="color: #6462F3;margin-right: 28px;" @click="handleClickManageDomainName(scope.row)"  class="opearButton">管理</span>
								<span style="color: #6462F3;margin-right: 28px;" @click="handleClickRenewDomainName(scope.row)"  class="opearButton">续费</span>
								<span style="color: #6462F3;" @click="handleClickOutDomainName(scope.row)"  class="opearButton">转出</span>
							</template>
						</el-table-column>


					</el-table>
						<div class="pagination-wrapper">
						  <div class="total-wrapper">
							  <span class="totalSize">共有 {{pageInfo.totalSize}} 条记录</span>
							  <el-select @change="handleSizeChange" v-model="pageInfo.pagesize">
								    <el-option
								      v-for="item in pageOptions"
								      :key="item.value"
								      :label="item.label"
								      :value="item.value">
								    </el-option>
							  </el-select>
						  </div>
						  <el-pagination
							:page-size="pageInfo.pagesize"
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="pageInfo.currentPage"
							layout="prev, pager, next, jumper"
							:total="pageInfo.totalSize">
						  </el-pagination>
						</div>
						
						<el-dialog  style="box-sizing: border-box;" width="640px" class="yz-el-dialog" :visible.sync="domainNameOutreusltVisble">
							<div slot="title" class="dialog-title">
								域名转出
							</div>
							<div class="dialog-content">
								<div class="dialog-content-infowrapper fboxRow mb-20">
									<img class="mr-20 flagImg" src="../img/warning-orange02.png"/>
									<p class="fboxCenter" style="line-height: 25px;">
										当前域名暂不支持转出
									</p>
								</div>
								<el-table empty-text :data="[outResultInfo]" tooltip-effect="dark" style="width: 100%;margin-bottom: 50px;">
									<el-table-column label="域名" width="auto">
										<template slot-scope="scope">
											{{scope.row.name}}
										</template>
									</el-table-column>
									
									<el-table-column width="auto" label="原因">
										<template slot-scope="scope">
											{{scope.row.reason}}
										</template>
									</el-table-column>
								</el-table>

								
								
								<div class="dialog-button-wrapper fboxRow">
									<div @click="domainNameOutreusltVisble = false" class="yzButton  confirm">确认</div>
									<div @click="domainNameOutreusltVisble = false" class="yzButton cancelButton">取消</div>
								</div>
							</div>
						</el-dialog>
						
				</div>
			</div>


		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderList-wrapper',
				data: function() {
					return {
						//  新增
						domainNameOutreusltVisble: false, // 转出  dialog
						//  转出结果信息
						outResultInfo:{
							
						},
						// 表格数据
						tableData: [{
							id: 1,
							name:'baidu.com', // 域名名称
							status:'cheat', // 状态
							registerTime: '2020-11-25', // 注册时间
							expireTime: '2020-11-30' // 注册时间
						},{
							id: 2,
							name:'baidu1.com', // 域名名称
							status:'activate', // 状态
							registerTime: '2020-11-25', // 注册时间
							expireTime: '2020-11-30' // 注册时间
						},{
							id: 3,
							name:'baidu2.com', // 域名名称
							status:'cancel', // 状态
							registerTime: '2020-11-25', // 注册时间
							expireTime: '2020-11-30' // 注册时间
						},{
							id: 4,
							name:'baidu3.com', // 域名名称
							status:'waitHandle', // 状态
							registerTime: '2020-11-25', // 注册时间
							expireTime: '2020-11-30' // 注册时间
						},{
							id: 5,
							name:'baidu3.com', // 域名名称
							status:'overdue', // 状态
							registerTime: '2020-11-25', // 注册时间
							expireTime: '2020-11-30' // 注册时间
						}],
						// 新增 end
						
						
						isFirstShowOrderType:true, // 是否是第一次展示工单类型
						selectOrderType: 'allOrder', // 选中工单类型  默认为全选
						orderTypeGroup:[
						{
							label: '全部',
							value: 'allOrder'
						},
						{
							label:'未处理',
							value: 'waithandle'
						},{
							label: '处理中',
							value: 'handling'
						},{
							label:'已处理',
							value: 'alreadyhandle'
						},{
							label: '已评价',
							value: 'alreadyestimate'
						}],
						searchkeywords:undefined, //  搜索关键字

						
						// 分页信息
						pageInfo: {
							pagesize: 8,
							currentPage:1,
							totalSize: 41
						},
						pageOptions: [{
						  value:  6,
						  label: '6条/页'
						}, {
						  value:  8,
						  label: '8条/页'
						},{
						  value:  10,
						  label: '10条/页'
						}],
						

					}
				},

				methods: {
				// 跳转到首页的方法
				handleClickGotoHomePage: function() {
					gotohomePage()
				},
				
				// 点击域名注册的方法
				handleClickdomainNameRegister:_throttle(function() {
					console.log('点击域名注册的方法')
					// window.open('orderSubmit.html')
				}),
				
				// 点击管理域名 
				handleClickManageDomainName: function(row) {
					console.log('点击管理域名')
					window.open('detail.html?domainNameId=' + row.id,'_self')
				},
				// 点击续费域名
				handleClickRenewDomainName: function(row) {
					window.open('../priceCenter/renewDetail.html?domainNameId=' + row.id,'_self')
				},
				// 点击转出域名
				handleClickOutDomainName: function(row) {
					console.log('点击转出域名')
					this.outResultInfo = deepCopy(row)
					// 模拟后台禁止转出
					if(row.id === 2) {
						this.outResultInfo.reason = '域名注册 60 天内，无法转移。'
						this.domainNameOutreusltVisble =  true
						return
					}
					window.open('outForm.html','_self')
					
				},
				
				
				
				// 新增 end
					
					
				

				// 获取选择的状态名称
				getselectOrderName:function() {
					let name = ''
					let that = this
					this.orderTypeGroup.forEach(function(item){
						if(item.value === that.selectOrderType) {
							if(item.value === 'allOrder') {
								name =  '工单状态'
							}else {
								name =  item.label 
							}
						}
					})
					return name
				},
				// 改变工单类型
				changeOrderType: function(e) {
					
					this.selectOrderType =  e
					console.log(e)
					console.log('这里要重新发起请求  重要参数 selectOrderType')
				}, 
				// 工单类型下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false
				watchOrderType:function(e) {
					if(e) {
						$('.el-select-dropdown__item').removeClass('hover')
						this.isFirstShowOrderType =  true
					}
				},
				// 搜索
				getOrderRecordBykeyword: function() {
					if(this.searchkeywords === '' ||  this.searchkeywords === undefined) {
						return 
					}
					console.log('获取工单记录数据')
				},
				//处理状态
				handlestatus: function(row) {
					// 状态  激活：activate ；  欺诈 cheat；待审核 waitHandle; overdue 过期
					switch (row.status) {
						case 'cheat':
							return '<p style="color:#FF9416">有欺诈</p>'
						case 'activate':
							return '<p style="color:#3FBF70">已激活</p>'
						case 'cancel':
							return '<p style="color:#F21C30">被取消</p>'
						case 'waitHandle':
							return '<p style="color:#6462F3">待审核</p>'
						case 'overdue':
							return '<p>过期</p>'
						default:
							break;
					}
				
				},
				handleSizeChange:function(e) {
									console.log(e)
				},
				handleCurrentChange:function(val) {
									console.log('当前页为xxxxx')
				},
				// 点击查看工单
				handleClicklookorderRecord:_throttle(function(row) {
					console.log('点击查看工单')
					window.open('orderHandle.html?id=' + row.id, '_self')
				}),
				// 点击关闭工单
				handleClickCloseorderRecord:_throttle(function() {
					console.log('点击关闭工单')
				}),
				
				
				
				},
				mounted: function() {
							let that = this
							$('.el-select-dropdown__item').hover(function() {
								that.isFirstShowOrderType =  false
							})
							
							$('.button-wrapper-right .el-input__suffix').click(function() {
								that.getOrderRecordBykeyword()
							})
				}

			})
		</script>
	</body>
</html>
